<template>
  <div class="page-tabbar">
    <xgjHeader></xgjHeader>
    <div class="page-wrap">
      <mt-tab-container class="page-tabbar-container" v-model="selected">
        <mt-tab-container-item id="盘口" v-if="selected == '盘口'"><list_usr></list_usr></mt-tab-container-item>
        <mt-tab-container-item id="分时" v-if="selected == '分时'"><appCondition></appCondition></mt-tab-container-item>
        <mt-tab-container-item id="K线" v-if="selected == 'K线'"><consultation2></consultation2></mt-tab-container-item>
        <mt-tab-container-item id="交易" v-if="selected == '交易'"><mine></mine></mt-tab-container-item>
      </mt-tab-container>
    </div>
    <mt-tabbar v-model="selected" fixed style="z-index:10;background:#282828">
      <mt-tab-item id="盘口">
        <img slot="icon" src="../assets/pankou.png" v-show="selected == '盘口'" style="width:.9rem;height:.9rem" />
        <img slot="icon" src="../assets/pankou.png" v-show="selected != '盘口'" style="width:.9rem;height:.9rem" />
      </mt-tab-item>
      <mt-tab-item id="分时">
        <img slot="icon" src="../assets/fenshi.png" v-show="selected == '分时'" style="width:.9rem;height:.9rem" />
        <img slot="icon" src="../assets/fenshi.png" v-show="selected != '分时'" style="width:.9rem;height:.9rem" />
      </mt-tab-item>
      <mt-tab-item id="K线">
        <img slot="icon" src="../assets/K.png" v-show="selected == 'K线'" style="width:.9rem;height:.9rem" />
        <img slot="icon" src="../assets/K.png" v-show="selected != 'K线'" style="width:.9rem;height:.9rem" />
      </mt-tab-item>
      <mt-tab-item id="交易">
        <img slot="icon" src="../assets/jiaoyi.png" v-show="selected == '交易'" style="width:.9rem;height:.9rem" />
        <img slot="icon" src="../assets/jiaoyi.png" v-show="selected != '交易'" style="width:.9rem;height:.9rem" />
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import list_usr from '../components/commapp/list_usr';
import mine from '../components/commapp/mine';
import kline from '../components/commapp/kline';
import appCondition from '../components/commapp/appCondition';
import consultation2 from '../components/commapp/consultation2';

import xgjHeader from '../page/header.vue';

import { mapState } from 'vuex';

export default {
  name: 'page-tabbar',
  data() {
    return {
      selected: '盘口',
      tabsParam: []
    };
  },
  components: { kline, list_usr, mine, appCondition, consultation2, xgjHeader },
  created: function() {},
  mounted() {},
  watch: {
    selected(name) {
      if (name == '分时') {
      }
      if (name == 'K线') {
      }
      if (name == '交易') {
      }
      if (name == '盘口') {
      }
      this.$store.commit('set', { tablistli: name });
    },
    getProductList() {
      // this.loadNewData();
    }
  },
  methods: {
    toggleTabs: function(index, item) {
      this.nowIndex = index;
      this.selected = '交易';
    },
    loadNewData() {
      let item = this.$store.state.one_show_product;
      let goodsList = this.$store.state.product_list;
      for (let i in goodsList) {
        if (goodsList[i].code == item.code) {
          item = goodsList[i];
          return this.$store.commit('set_one_show_product', item);
        }
        if (!this.$store.state.one_show_product) {
          item = goodsList[0];
          return this.$store.commit('set_one_show_product', item);
        }
      }
    }
  }
};
</script>

<style>
.mint-tabbar > .mint-tab-item.is-selected {
  background: #e96302 !important;
}

.page-tabbar {
  overflow: hidden;
  height: 100vh;
}

.page-wrap {
  overflow: auto;
  height: 100%;
  padding-bottom: 100px;
  background: #414141;
}

.Catalog1 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
  margin-top: 0.5rem;
  /* background-color: coral; */
}

.Catalog_one1 {
  width: 3rem;
  /* background-color: blanchedalmond; */
  border: 1px solid #26a2ff;
  background: #26a2ff;
  border-radius: 10px;
  color: #fff;
  height: 1.5rem;
  font-size: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.5rem;
  /* border: 1px solid red; */
}

.mint-header.is-fixed {
  z-index: 10 !important;
  background: #1d1d1d;
}

.mint-header.is-fixed {
  z-index: 10 !important;
}
</style>
